<script type="text/javascript" SRC="/js/jquery.uploadify.min.js"></script>
<script type="text/javascript" SRC="/js/swfobject.js"></script>
<script type="text/javascript" SRC="/js/jquery-ui.js"></script>
<script type="text/javascript" SRC="/js/product.picture.upload.js"></script>
<link rel="stylesheet" href="/css/uploadify.css" type="text/css" />
<link rel="stylesheet" href="/css/blitzer/jquery-ui.css" type="text/css" />
<script>
	var delId;
	var currentSortStr="";
	var paginationPageSize =15;
	var paginationTotal = <{$total}>;//记录总数
	var customerId = "<{$customerId}>";//用户id
	$(function(){
		initData(0);
		$("#tipDialog").dialog({
			autoOpen:false,
			modal:true,
			width:500,
			show:"slide",
			buttons:{
				"Close":function(){
					$(this).dialog("close");
				}
			}
		});
		$("#printDialog").dialog({
			autoOpen:false,
			modal:true,
			width:500,
			show:"slide",
			buttons:{
					"OK":function(){
						$("#printForm").submit();
					},
					"Close":function(){
						$(this).dialog("close");
					}
				}
		});
		$("#delDialog").dialog({
			autoOpen:false,
			modal:true,
			show:"slide",
			buttons:{
				"OK":function(){
					$(this).dialog("close");
					$.ajax({
						url:"/merchant/product/del/productId/"+delId,
						dataType:"json",
						async:false,
						success:function(json){
							$("#tipDialog").html(json).dialog("open");
							paginationTotal = paginationTotal - 1;
							<!-- changePageSize($("#pageSize")); -->
							initData(paginationCurrentPage-1,paginationPageSize);
						}
					});
				},
				"Cancel":function(){
					$(this).dialog("close");
				}
			}
		});
		$("[name=search]").click(function(){
			paginationCurrentPage = 1;
			initData(0);
		});
		$(".checkAll").live("click",function(){
			if(typeof $(".checkAll").attr("checked") == "string"){
				$(".checkProduct").attr("checked",true);
			}else{
				$(".checkProduct").attr("checked",false);
			}
			
		});
		$(".sort").live("click",function(){
			loading();
			if($(this).attr("sortMethod") == "asc"){
				$(this).attr("sortMethod","desc"); 
			}else{
				$(this).attr("sortMethod","asc"); 
			}
			currentSortStr = "&sortColumn="+$(this).attr("sortColumn")+"&sortMethod="+$(this).attr("sortMethod");
			loadData(paginationCurrentPage,paginationPageSize,currentSortStr);
			closeLoading();
		});
		
		$(".activate").click(function(){
			if($(".checkProduct:checked").length == 0){
				$("#tipDialog").html("Please Select SKU");
				$("#tipDialog").dialog("open");
				return false;
			}
			var productIdStr = "";
			$.each($(".checkProduct:checked"),function(){
				productIdStr += $(this).val()+",";
			});
			activate(productIdStr,"activate");
		});
		
		$(".inactivate").click(function(){
			if($(".checkProduct:checked").length == 0){
				$("#tipDialog").html("Please Select SKU");
				$("#tipDialog").dialog("open");
				return false;
			}
			var productIdStr = "";
			$.each($(".checkProduct:checked"),function(){
				productIdStr += $(this).val()+",";
			});
			activate(productIdStr,"inactivate");
	
		});
		
		$(".print").click(function(){
			if($(".checkProduct:checked").length == 0){
				$("#tipDialog").html("Please Select SKU");
				$("#tipDialog").dialog("open");
				return false;
			}
			var html = "<form action='print-label' method='post' id='printForm' target='_blank'>";
			html += '<div class="row height25 row-header"><div class="per20  cell" sortColumn="productName">SKU Name</div><div class="per20 cell" sortColumn="sku">SKU</div><div class="per20 cell " sortColumn="status">Status</div><div class="per20 cell">Category</div><div class="per15 cell no-background">Qty</div><div class="clearFloat"></div></div>';
			html += '<div class="tab-div">';
			$.each($(".checkProduct:checked"),function(){
				html += '<div class="row height25"><div class="per20  cell" sortColumn="productName">'+$(this).parent().parent().find("div:eq(1)").text()+'</div><div class="per20 cell" sortColumn="sku">'+$(this).parent().parent().find("div:eq(3)").text()+'</div><div class="per20 cell " sortColumn="status">'+$(this).parent().parent().find("div:eq(4)").text()+'</div><div class="per20 cell">'+$(this).parent().parent().find("div:eq(5)").text()+'</div><div class="per15 cell no-background"><input type="text" class="width1" value="1" name="count'+$(this).val()+'"/></div><div class="clearFloat"></div></div>';
			});
			html += '</div>';
			html+= "</form>";
			$("#printDialog").html(html).dialog("open");
		});
		//回车处理
		$("input[name=sku]").keyup(function(e){
			var key = e.which;
			if(key==13){
				initData(0);
			}
		});

        $(".tab-div>div").live({
            'mouseover':function(){$(this).css('background','#FFF8DB');},
            'mouseout':function(){$(this).css('background','#FFF');}
        });

	});
	
	function activate(productIdStr,type){
		loading();
		var url;
		if(type == "activate"){
			url = "/merchant/product/activate";
		}else{
			url = "/merchant/product/inactivate";
		}
		$.ajax({
			url:url,
			dataType:"json",
			type:"post",
			data:{"productIdStr":productIdStr},
			success:function(json){
					
			var html = "";
			$.each(json,function(k,v){
					html += "<div class='width100'>SKU("+k+"):"+v+"</div>";
				});
				$("#tipDialog").html(html).dialog("open");
				loadData(paginationCurrentPage,paginationPageSize,currentSortStr);
				closeLoading();
			}
		});
	}
	function productEdit(id,edit){
		window.open("/merchant/product/view-product-info/productId/"+id+"/edit/"+edit,"_blank");
	}
	
	function productDel(id){
		delId = id;
		$('#delDialog').dialog('open');
	}
	
	function loadData(page,pageSize,sortStr){
		$(".checkAll").attr("checked",false);
		if(typeof sortStr == "undefined"){
			sortStr = currentSortStr;
		}
		var paramStr = "";
		if($.trim($("[name=sku]").val()) != ""){
			paramStr += "&productSku="+$.trim($("[name=sku]").val());
		}
		if($.trim($("[name=status]").val()) != ""){
			paramStr += "&productStatus="+$.trim($("[name=status]").val());
		}
		 $.ajax({ //这里使用到Jquery的ajax方法
		  type: "POST",
		  async: false,
		  dataType: "json",
		  url: "/merchant/product/get-list-data", //请求的处理url
		  data: "page=" + page + "&pageSize="+pageSize+paramStr+sortStr,//传入的参数，第一个参数就是分页的页数
		  success: function(json) { 
			 if(typeof json.ask != "undefined" && json.ask){
				paginationTotal = json.total;
				var html = '';
				if (typeof json.result == "undefined") return;
				$.each(json.result,function(k,v){					
					html += '<div class="row height25">';
					html += '<div style="width:50px;" class="cell"><input type="checkbox" name="checkPoduct[]" class="checkProduct" value="'+v.product_id+'"/>&nbsp;</div>';
					html += '<div style="width:200px;" class="cell" title="'+v.product_title+'">'+v.product_title+'</div>';
					html += '<div style="width:200px;" class="cell" title="'+v.product_sku+'">'+v.product_sku+'</div>';
					
					html += '<div style="width:100px;" class="cell" title="'+v.product_status+'">'+v.product_status+'</div>';
					html += '<div style="width:200px;" class="cell" title="'+v.category.poc_value+'">'+v.category.poc_value_cn+'</div>';
					html += '<div style="width:100px;" class="cell" title="'+v.product_weight+'">'+v.product_weight+'</div>';
					html += '<div style="width:200px;" class="cell" title="'+v.product_date_added+'">'+v.product_date_added+'</div>';
					html += '<div style="width:100px; padding-top:4px;" class="cell no-background"><img src="/images/icon_view.gif" class="cursor" title="Detail" onclick="productEdit('+v.product_id+',false)"/><img src="/images/icon_edit.gif" class="cursor" title="Edit" onclick="productEdit('+v.product_id+',true)",/><img src="/images/icon_del.gif" class="cursor" title="Delete" onclick="productDel('+v.product_id+')"/></div>';
					html += '</div>';
				});
				$(".tab-div").html(html);
			 }
		  }
		}); 
	}
</script>
<style>
	.error{
		color:red;
		margin-left:20px;
	}
	.width10{
		width:10%;
	}
	table.myTab th{ background:#f1f6f9 url(/images/left-menu-li.gif) repeat-x left top}
	.myTab td{ padding:3px; border:1px solid #AECED9; text-align:center}
	.myTab th{ padding:5px; border:1px solid #AECED9;}
	.even-tr{background:#E6F3F9}
	.hover-tr{ background:#318DAC; color:white}
	.sort{cursor:pointer}
	.sort:hover{color:black}
	.bold{font-weight:bold}
	.no-background{background-image:none;}
</style>
<div class="position"><a href='/default/index'><{$languages['HOME']}></a> &gt; <a href='/merchant/my-account'><{$languages['MERCHANT_CENTER']}></a>  &gt; <{$languages['OPERATION']}> &gt; <{$languages['PRODUCT_LIST']}></div>

<h4><{$languages['PRODUCT_LIST']}></h4>
<div class="userinfo">
    <p><span class="width3">SKU:</span><input type="text" class="input-width-1" name="sku"/> <span class="width1"><{$languages['STATUS']}>:</span>
				<select class="select-width-1" name="status">
					<option value="">All</option>
					<{foreach from=$status item=statu key=key}>
						<option value="<{$key}>"><{$statu}></option>
					<{/foreach}>
				</select>
				<input type="image" src="/images/search.gif" name="search"/>
	</p>
</div>
 
<div class="width100 center">
	<span class="button-2 activate bold"><{$languages['ACTIVATE']}></span>
	<span class="button-2 inactivate bold"><{$languages['INACTIVATE']}></span>
	<span class="button-2 print bold"><{$languages['PRINT_LABEL']}></span>
</div>

<div class='editProductClass' style=" OVERFLOW-X: scroll; scrollbar-face-color:#B3DDF7;scrollbar-shadow-color:#B3DDF7;scrollbar-highlight-color:#B3DDF7;scrollbar-3dlight-color:#EBEBE4;scrollbar-darkshadow-color:#EBEBE4;scrollbar-track-color:#F4F4F0;scrollbar-arrow-color:#000000; width:745px;">
    <div class="row height25 row-header" style="width:1350px; border:1px #CCCCCC solid;">
        <div style="width:50px;" class="cell"><input type="checkbox" class="checkAll"/>&nbsp;</div>
        <div style="width:200px;" class="cell sort" ><{$languages['SKUNAME']}></div>
        <div style="width:200px;" class="cell sort" sortColumn="sku">SKU</div>
        <div style="width:100px;" class="cell sort" sortColumn="status"><{$languages['STATUS']}></div>
        <div style="width:200px;" class="cell"><{$languages['CATEGORY']}></div>
        <div style="width:100px;" class="cell sort" sortColumn="weight"><{$languages['WEIGHT']}></div>
        <div style="width:200px;" class="cell sort" sortColumn="time"><{$languages['CREATED_DATE']}></div>
        <div style="width:100px;" class="cell no-background"><{$languages['ACTIONS']}></div>
        <div class="clearFloat"></div>
    </div>			
    <div class="tab-div" style="width:1350px;"> 
    </div>
</div>
		
<div class="pagination" style="padding-top:10px"></div>
<div id="tipDialog" style="display:none" title="Tip"></div>
<div id="delDialog" style="display:none" title="Product Delete Confirm">
	Are you sure to delete it?
</div>
<div id="uploadFileDialog" style="display:none" title="images upload">
	<div id="fileQueue"></div>
	<input type="file" id="uploadify" class="half" value="" name="uploadify"/>
</div>

<div id="printDialog" style="display:none" title="Print"> </div>